<template>
    <el-row>
        <!-- 头部 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <el-breadcrumb :separator-icon="ArrowRightBold">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>数据概况</el-breadcrumb-item>
                    <el-breadcrumb-item>数据中心</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
        </el-col>
        <div style="padding: 5px;"></div>
        <!-- 内容区域 -->
        <el-col :span="24">
            <!-- <el-card shadow="hover"> -->
            <el-row>
                <el-col :span="24">
                    <el-card shadow="hover">
                        <div style="padding: 10px;">
                            <div style="padding: 2px; color: #646464; font-size: 18px; font-weight: 700;">管理员：{{
                                countData.nickname }}</div>
                            <div style="padding: 5px;"></div>
                            <div style="padding: 2px; color: #8a8a8a; font-size: 16px; font-weight: 600;">登录
                                IP： {{ countData.uip }}， 登录城市：{{ countData.address }}， 登录时间：{{ countData.log_time }}</div>
                        </div>

                    </el-card>
                </el-col>
            </el-row>
            <div style="height: 10px;"></div>

            <el-col :span="24">
                <el-card shadow="never">

                    <div style="display: flex;">
                        <el-date-picker v-model="formData.time_date[0]" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="开始日期" style="width: 180px;" />
                        <div style="width: 15px"></div>
                        <el-date-picker v-model="formData.time_date[1]" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="结束日期" style="width: 180px;" />
                        <el-button type="primary" :icon="Search" @click="inputSearch()">搜索</el-button>
                    </div>

                </el-card>
                <div style="height: 10px;"></div>
            </el-col>

            <el-row :gutter="20">

                <el-col :span="4">
                    <el-card shadow="hover">
                        <div style="display: flex; justify-content: center; align-items: center; padding: 20px;">
                            <el-icon style="font-size: 60px; color: #fac858;">
                                <List />
                            </el-icon>
                            <div style="width: 10px;"></div>
                            <div style="font-size: 20px; color: #333333;">
                                <div>{{ countData.online_num }}</div>
                                <div style="padding: 1px;"></div>
                                <div style="font-size: 16px;">在线人数</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="4">
                    <el-card shadow="hover">
                        <div style="display: flex; justify-content: center; align-items: center; padding: 20px;">
                            <el-icon style="font-size: 60px; color: #ee6666;">
                                <List />
                            </el-icon>
                            <div style="width: 10px;"></div>
                            <div style="font-size: 20px; color: #333333; ">
                                <div v-if="countData.tou_zhu_money">{{ countData.tou_zhu_money }}</div>
                                <div v-else>0.00</div>
                                <div style="padding: 2px;"></div>
                                <div style="font-size: 16px;">投注总金额（元）</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="4">
                    <el-card shadow="hover">
                        <div style="display: flex; justify-content: center; align-items: center; padding: 20px;">
                            <el-icon style="font-size: 60px; color: #5470c6;">
                                <List />
                            </el-icon>
                            <div style="width: 10px;"></div>
                            <div style="font-size: 20px; color: #333333; ">
                                <div v-if="countData.tou_zhu_yi_money">{{ countData.tou_zhu_yi_money }}</div>
                                <div v-else>0.00</div>
                                <div style="padding: 1px;"></div>
                                <div style="font-size: 16px;">中奖总金额（元）</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="4">
                    <el-card shadow="hover">
                        <div style="display: flex; justify-content: center; align-items: center; padding: 20px;">
                            <el-icon style="font-size: 60px; color: #91cc75;">
                                <List />
                            </el-icon>
                            <div style="width: 10px;"></div>
                            <div style="font-size: 20px; color: #333333;">
                                <div v-if="countData.tou_zhu_wei_money">{{ countData.tou_zhu_wei_money }}</div>
                                <div v-else>0.00</div>
                                <div style="padding: 1px;"></div>
                                <div style="font-size: 16px;">未中奖总金额（元）</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>


                <el-col :span="4">
                    <el-card shadow="hover">
                        <div style="display: flex; justify-content: center; align-items: center; padding: 20px;">
                            <el-icon style="font-size: 60px; color: #fac858;">
                                <List />
                            </el-icon>
                            <div style="width: 10px;"></div>
                            <div style="font-size: 20px; color: #333333;">
                                <div>{{ truncateDecimal(countData.tou_zhu_money - countData.tou_zhu_yi_money, 2) }}</div>
                                <div style="padding: 1px;"></div>
                                <div style="font-size: 16px;">盈亏总金额（元）</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>


                <el-col :span="4">
                    <el-card shadow="hover">
                        <div style="display: flex; justify-content: center; align-items: center; padding: 20px;">
                            <el-icon style="font-size: 60px; color: #73c0de;">
                                <List />
                            </el-icon>
                            <div style="width: 10px;"></div>
                            <div style="font-size: 20px; color: #333333;">
                                <div v-if="countData.tou_zhu_che_money">{{ countData.tou_zhu_che_money }}</div>
                                <div v-else>0.00</div>
                                <div style="padding: 1px;"></div>
                                <div style="font-size: 16px;">撤单总金额（元）</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>

            </el-row>

            <div style="height: 20px;"></div>
            <el-row :gutter="20">

                <el-col :span="4">
                    <el-card shadow="hover">
                        <div style="display: flex; justify-content: center; align-items: center; padding: 20px;">
                            <el-icon style="font-size: 60px; color: #f0c6c6;">
                                <List />
                            </el-icon>
                            <div style="width: 10px;"></div>
                            <div style="font-size: 20px; color: #333333; ">
                                <div v-if="countData.wkj_money_28">{{ countData.wkj_money_28 }}</div>
                                <div v-else>0.00</div>
                                <div style="padding: 1px;"></div>
                                <div style="font-size: 16px;">28未开奖（元）</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="4">
                    <el-card shadow="hover">
                        <div style="display: flex; justify-content: center; align-items: center; padding: 20px;">
                            <el-icon style="font-size: 60px; color: #f0c6c6;">
                                <List />
                            </el-icon>
                            <div style="width: 10px;"></div>
                            <div style="font-size: 20px; color: #333333; ">
                                <div v-if="countData.wkj_money_lhc">{{ countData.wkj_money_lhc }}</div>
                                <div v-else>0.00</div>
                                <div style="padding: 1px;"></div>
                                <div style="font-size: 16px;">六合彩未开奖（元）</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="4">
                    <el-card shadow="hover">
                        <div style="display: flex; justify-content: center; align-items: center; padding: 20px;">
                            <el-icon style="font-size: 60px; color: #ee6666;">
                                <List />
                            </el-icon>
                            <div style="width: 10px;"></div>
                            <div style="font-size: 20px; color: #333333; ">
                                <div v-if="countData.user_zhu_money">{{ countData.user_zhu_money }}</div>
                                <div v-else>0.00</div>
                                <div style="padding: 2px;"></div>
                                <div style="font-size: 16px;">用户总余额（元）</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="4">
                    <el-card shadow="hover">
                        <div style="display: flex; justify-content: center; align-items: center; padding: 20px;">
                            <el-icon style="font-size: 60px; color: #5470c6;">
                                <List />
                            </el-icon>
                            <div style="width: 10px;"></div>
                            <div style="font-size: 20px; color: #333333; ">
                                <div v-if="countData.user_cz_money">{{ Math.round(countData.user_cz_money) }}</div>
                                <div v-else>0</div>
                                <div style="padding: 1px;"></div>
                                <div style="font-size: 16px;">用户总充值（元）</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="4">
                    <el-card shadow="hover">
                        <div style="display: flex; justify-content: center; align-items: center; padding: 20px;">
                            <el-icon style="font-size: 60px; color: #91cc75;">
                                <List />
                            </el-icon>
                            <div style="width: 10px;"></div>
                            <div style="font-size: 20px; color: #333333;">
                                <div v-if="countData.user_tx_money">{{ Math.round(countData.user_tx_money) }}</div>
                                <div v-else>0</div>
                                <div style="padding: 1px;"></div>
                                <div style="font-size: 16px;">用户总提现（元）</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>


                <el-col :span="4">
                    <el-card shadow="hover">
                        <div style="display: flex; justify-content: center; align-items: center; padding: 20px;">
                            <el-icon style="font-size: 60px; color: #73c0de;">
                                <List />
                            </el-icon>
                            <div style="width: 10px;"></div>
                            <div style="font-size: 20px; color: #333333;">
                                <div v-if="countData.user_zhu_dan">{{ countData.user_zhu_dan }}</div>
                                <div v-else>0</div>
                                <div style="padding: 1px;"></div>
                                <div style="font-size: 16px;">今日新注册用户（人）</div>
                            </div>
                        </div>
                    </el-card>
                </el-col>

               <!-- <el-col :span="4">
                    <el-card shadow="hover">
                        <div style="display: flex; justify-content: center; align-items: center; padding: 20px;">
                            <el-icon style="font-size: 60px; color: #f0c6c6;">
                                <List />
                            </el-icon>
                            <div style="width: 10px;"></div>
                            <div style="font-size: 20px; color: #333333; ">
                                <div v-if="countData.tou_zhu_dan">{{ countData.tou_zhu_dan }}</div>
                                <div v-else>0</div>
                                <div style="padding: 1px;"></div>
                                <div style="font-size: 16px;">今日订单总数（单）</div>
                            </div>
                        </div>
                    </el-card>
                </el-col> -->
            </el-row>


            <!-- 曲线图 -->
            <div style="height: 20px;"></div>
            <el-row :gutter="20">

                <el-col :span="12">
                    <el-card shadow="hover">
                        <div 
                            style="padding: 10px; width: 100%; height: 400px; display: flex; justify-content: space-evenly; align-items: center;">
                            <div style=" width: 400px; height: 400px; " ref="circRef"></div>
                            <div style=" width: 400px; height: 400px;" ref="xircRef"></div>
                        </div>
                    </el-card>

                </el-col>

                <el-col :span="12">
                    <el-card shadow="hover">
                        <div style="padding: 10px; width: 100%; height: 400px;" ref="discRef"></div>
                    </el-card>
                </el-col>

            </el-row>




        </el-col>
    </el-row>
</template>

<script setup>

import { ref, onMounted, reactive } from 'vue';
import { request_post } from '@/common/axios/request.js'
import { success, error } from '@/common/tool/message.js'
import { ArrowRightBold, List, Search } from '@element-plus/icons-vue'
import * as echarts from 'echarts';
import {useRouter} from "vue-router";

const router = useRouter()
const formData = reactive({
    time_date: [],
})

let discChart = ref(null)
let circChart = ref(null)
let xircChart = ref(null)

let discRef = ref(null)
let circRef = ref(null)
let xircRef = ref(null)

// 折线图数据
let discOption = {
    title: {
        text: '近7日交易总额'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['Email']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [120, 132, 101, 134, 90.00, 230, 210]
        },

    ]
}

let circOption = {
    title: {
        text: '用户统计',
        subtext: 'Fake Data',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: '用户注册统计',
            type: 'pie',
            radius: '50%',
            data: [
                { value: 1048, name: '用户总数' },
                { value: 735, name: '代理总数' },
                { value: 735, name: '微信注册' },
                { value: 735, name: 'H5端注册' },
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
}

let xircOption = reactive({
    title: {
        text: '用户投注喜好',
        subtext: 'Fake Data',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },

    series: [
        {
            name: '投注方式',
            type: 'pie',
            radius: '50%',
            data: [
                { value: 1048, name: '键盘投注' },
                { value: 735, name: '快捷投注' }
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
})


function discChartsat() {
    discChart.value = echarts.init(discRef.value)
    discChart.value.setOption(discOption)
}

function circChartsat() {
    circChart.value = echarts.init(circRef.value)
    circChart.value.setOption(circOption)
}

function xiscChartsat() {

    xircChart.value = echarts.init(xircRef.value)
    xircChart.value.setOption(xircOption)
}




onMounted(() => {
    // 设置默认日期为当天
    const today = new Date();
    // 开始日期：当天00:00:00
    const startDate = new Date(today);
    startDate.setHours(0, 0, 0, 0);
    // 结束日期：当天23:59:59
    const endDate = new Date(today);
    endDate.setHours(23, 59, 59, 999);
    
    // 格式化日期为YYYY-MM-DD HH:mm:ss
    formData.time_date[0] = formatDate(startDate);
    formData.time_date[1] = formatDate(endDate);
    
    getIndexData()
})

// 日期格式化函数
function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

const countData = ref({})


function inputSearch() {
    getIndexData()
}

function getIndexData() {

    request_post('admin_census_index', formData).then(res => {
        if (res.data.code == 200) {
            countData.value = res.data.data
            xircOption.series[0].data = res.data.data.bet_data
            circOption.series[0].data = res.data.data.user_data
            discChartsat()
            circChartsat()
            xiscChartsat()
        } else {
            return error(res.data.msg)
        }
    })
}


// 截断小数，不四舍五入
function truncateDecimal(num, decimalPlaces) {
  const factor = Math.pow(10, decimalPlaces)
  return Math.floor(num * factor) / factor
}

</script>

<style scoped>
.el-pagination {
    padding: 0;
}

.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background-color: #f5f5f5;
    color: var(--el-color-primary);
}
</style>